<template>
	<div class="c-text" :style="[borderRadius,boxShadow,style_lh]">
		<!-- <a class="text-content" :style="linkStyle | calcStyle" href="#" v-html="cm.text.content"></a> -->
		<a class="text-content" :style="linkStyle | calcStyle" href="#" v-html="cm.props.text"></a>

	</div>
</template>

<script>
	// 防抖函数
	import {
		debounce
	} from '../utils.js'

	export default {
		name: 'BaseText',
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},

		computed: {
			cm() {
				// console.log('我进来了')
				return this.$store.getters.getCompConfigByCompid(this.compid)
			},
			linkStyle() {
				const css = this.cm.css
				return {
					ft: css.ft
				}
			},
			borderRadius() {
				return {
					borderRadius: this.cm.css.bd.r + 'px'
				}
			},
			boxShadow() {
				const comp = this.cm
				return {
					boxShadow: comp.css.bsd.x + 'px' + ' ' + comp.css.bsd.y + 'px' + ' ' + comp.css.bsd.s + 'px' + ' ' + comp.css.bsd.p +
						'px' + ' ' + comp.css.bsd.c
				}
			},
			style_lh() {
				return {
					lineHeight: this.cm.css.lh.h+ 'px'
				}
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			change_component: debounce(function(
				params
			) {
				const revoke_state=this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if(revoke_state){
						this.$store.commit('REVOKE_STATE',false)
					}else{
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300)

		}
	}
</script>
<style>
	.tool-bar {
		position: absolute;
		min-width: 144px;
		display: block;
		z-index: 1042;
		font-size: 12px;
		background-color: #fff;
		box-shadow: 0 0 16px rgba(0, 0, 0, .16);
		cursor: pointer;
		padding: 4px 0;
	}

	.tool-bar li {
		height: 24px;
		line-height: 24px;
		padding: 0 16px;
		position: relative;
		box-sizing: content-box;
		color: #333;
	}

	.tool-bar li a {
		color: #333;
	}

	.tool-bar li span {
		float: right;
		color: #999;
	}

	.tool-bar li:hover {
		background-color: #1593ff;
		color: #fff;
	}

	.tool-bar li a:hover {
		color: #1593ff;
	}

	.tool-bar li:hover span {
		color: #fff;
	}

	.tool-bar li.delete:hover {
		background-color: #ff296a;
	}

	.tool-bar li.bottom_bar {
		display: flex;
		justify-content: space-between;
	}

	.tool-bar li.bottom_bar:hover {
		background-color: #fff;
	}

	.container,
	.comp-lists {
		overflow: visible;
	}
</style>
